<template>
	<view class="popup popup--absolute popup-refresh-box flex--col">
		<!-- aspectFit这个属性是必须的，可以按比例缩放图片 -->
		<image src="@/static/global/square.svg" mode="aspectFit" class="image"></image>
		<view class="text">
			<slot></slot>
		</view>
	</view>
</template>
 
<script>
export default {
	name: 'Loading'
};
</script>
 
<style lang="scss" scoped>
.popup-refresh-box {
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	gap:24px;
	width:100%;
	
	background:#fff;
	
	justify-content: center; /* 水平居中 */  
	align-items: center; /* 垂直居中 */  
	
	.image {
		margin-top: 100rpx;
		width:48px;
		height: 48px;
		animation-iteration-count: infinite;
		animation-name: loading;
		animation-duration: 2000ms;
		animation-delay: 200ms;
		animation-timing-function: ease-in-out;
	}
	.text {
		font-size:20px;
		color:#383838;
		font-weight: 700;
	}
}

@keyframes loading {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
</style>